import 'package:flutter/material.dart';
import 'package:happy_elf_app/utils/adaption.dart';
import 'package:happy_elf_app/utils/color.dart';
import 'package:happy_elf_app/views/Home/index.dart';
import 'package:happy_elf_app/views/My/index.dart';
import 'package:happy_elf_app/views/circle/index.dart';
import 'package:happy_elf_app/views/Space/index.dart';

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int _currentIndex = 0;

  final List<Widget> _pages = [
    const Home(),
    const Space(),
    const Circle(),
    const My(),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);

    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        setState(() {
          _currentIndex = _tabController.index;
        });
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  final List<Map<String, String>> _tabImages = [
    {
      'unselected': 'lib/assets/images/tab/home.png',
      'selected': 'lib/assets/images/tab/home-check.png'
    },
    {
      'unselected': 'lib/assets/images/tab/space.png',
      'selected': 'lib/assets/images/tab/space-check.png'
    },
    {
      'unselected': 'lib/assets/images/tab/circle.png',
      'selected': 'lib/assets/images/tab/circle-check.png'
    },
    {
      'unselected': 'lib/assets/images/tab/center.png',
      'selected': 'lib/assets/images/tab/center-check.png'
    },
  ];

  Widget _buildTabIcon(int index) {
    return Image.asset(
      _currentIndex == index
          ? _tabImages[index]['selected']!
          : _tabImages[index]['unselected']!,
      width: 44.px,
      height: 44.px,
    );
  }

  @override
  Widget build(BuildContext context) {
    // 1. 获取底部安全区域高度
    final bottomSafeHeight = MediaQuery.of(context).padding.bottom;

    return Scaffold(
      body: TabBarView(
        controller: _tabController,
        physics: const NeverScrollableScrollPhysics(),
        children: _pages,
      ),
      // 2. 底部导航栏：动态设置 padding 和 height
      bottomNavigationBar: Container(
        // 增加导航栏高度（根据需求调整）
        height: 70.px + bottomSafeHeight,
        padding: EdgeInsets.only(
          bottom: bottomSafeHeight, // 底部安全区域 padding
          top: 8.px, // 顶部内边距
        ),
        decoration: const BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 2,
              spreadRadius: 1,
              offset: Offset(0, -1),
            )
          ],
        ),
        child: Material(
          color: Colors.white,
          child: TabBar(
            controller: _tabController,
            labelColor: hexColor('#DF1E00'),
            unselectedLabelColor: Colors.grey,
            indicator: const BoxDecoration(),
            // 3. 调整 Tab 高度
            labelPadding: EdgeInsets.symmetric(vertical: 4.px),
            tabs: List.generate(4, (index) => Tab(icon: _buildTabIcon(index))),
          ),
        ),
      ),
    );
  }
}
